<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery-1.10.2.js"></script>
    <style>
        #window{
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;
            margin: 100px auto;
            -webkit-transform-style: preserve-3d;
        }
        #test{
            width: 300px;
            height: 300px;
            background-color: #266cad;
            margin: 100px auto;
            /*-webkit-transform: rotateX(deg);*/
        }
        #change{
            width: 100%;
            height: 300px;
            -webkit-transform-origin: bottom;
        }
        input{
            width: 600px;
        }
    </style>
    <script type="text/javascript">
        function change(obj){
            var x = $("#x").val();
            var y = $("#y").val();
            var z = $("#z").val();
            $("#x-s").html(x);
            $("#y-s").html(y);
            $("#z-s").html(z);
            $("#test").css({
                "-webkit-transform":"rotateX("+x+"deg)"+" rotateY("+y+"deg)"+" rotateZ("+z+"deg)"
            });
        }
    </script>
</head>
<body>
    <div id="window">
        <div id="test"></div>
    </div>

    <div id="change">
        <p>X轴</p><span id="x-s">0</span><input type="range" min="-360" max="360" value="0" onchange="change()" id="x"/>
        <p>Y轴</p><span id="y-s">0</span><input type="range" min="-360" max="360" value="0" onchange="change()" id="y"/>
        <p>Z轴</p><span id="z-s">0</span><input type="range" min="-360" max="360" value="0" onchange="change()" id="z"/>
    </div>
</body>
</html>